<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>多人对战 - ABC口算游戏</title>
    <link rel="stylesheet" href="css/multiplayer.css">
</head>
<body>
    <div class="container">
        <div class="game-card">
            <div class="card-content">
                <!-- 登录/注册界面 -->
                <div id="auth-screen" class="screen">
                    <h1>ABC口算游戏</h1>
                    <p style="font-size: 1.1rem; margin: 20px 0; color: #666;">多人对战模式</p>
                    
                    <div class="auth-tabs">
                        <button id="login-tab" class="tab-btn active" onclick="switchTab('login')">登录</button>
                        <button id="register-tab" class="tab-btn" onclick="switchTab('register')">注册</button>
                    </div>
                    
                    <!-- 登录表单 -->
                    <div id="login-form" class="auth-form active">
                        <div class="form-group">
                            <input type="text" id="login-username" placeholder="请输入用户名" required>
                        </div>
                        <div class="form-group">
                            <input type="password" id="login-password" placeholder="请输入密码" required>
                        </div>
                        <button class="auth-btn" onclick="login()">登录</button>
                        <p id="login-message" class="message"></p>
                    </div>
                    
                    <!-- 注册表单 -->
                    <div id="register-form" class="auth-form">
                        <div class="form-group">
                            <input type="text" id="register-username" placeholder="请输入用户名" required>
                        </div>
                        <div class="form-group">
                            <input type="password" id="register-password" placeholder="请输入密码" required>
                        </div>
                        <button class="auth-btn" onclick="register()">注册</button>
                        <p id="register-message" class="message"></p>
                    </div>
                </div>
                
                <!-- 用户信息和设置界面 -->
                <div id="user-screen" class="screen" style="display: none;">
                    <h1>多人对战</h1>
                    <div class="user-info">
                        <div class="user-details">
                            <h2 id="user-name"></h2>
                            <div class="points-display">
                                <span class="points-icon">⚡</span>
                                <span id="user-points">0</span>
                            </div>
                        </div>
                        <div class="user-rank">
                            <div class="rank-label">我的排名</div>
                            <div class="rank-value" id="user-rank">--</div>
                        </div>
                    </div>
                    
                    <div class="game-settings">
                        <div class="setting-group">
                            <label for="multiplayer-grade">选择年级：</label>
                            <select id="multiplayer-grade">
                                <option value="1">一年级</option>
                                <option value="2">二年级</option>
                                <option value="3">三年级</option>
                                <option value="4">四年级</option>
                                <option value="5">五年级</option>
                                <option value="6">六年级</option>
                            </select>
                        </div>
                        <p id="user-message" class="message"></p>
                    </div>
                    
                    <!-- 排行榜区域 -->
                    <div class="leaderboard-section">
                        <h3>🏆 全服排行榜</h3>
                        <div class="leaderboard-tabs">
                            <button id="show-top40-btn" class="tab-btn active" onclick="showLeaderboardTab('top40')">前40名</button>
                            <button id="show-my-rank-btn" class="tab-btn" onclick="showLeaderboardTab('myRank')">我的排名</button>
                        </div>
                        
                        <!-- 前40名排行榜 -->
                        <div id="top40-leaderboard" class="leaderboard-content active">
                            <div class="leaderboard-header">
                                <div class="rank-col">排名</div>
                                <div class="name-col">用户名</div>
                                <div class="points-col">积分</div>
                            </div>
                            <div class="leaderboard-body" id="leaderboard-list">
                                <!-- 排行榜数据将通过JavaScript动态加载 -->
                                <div class="loading">加载中...</div>
                            </div>
                        </div>
                        
                        <!-- 我的排名详情 -->
                        <div id="my-rank-detail" class="leaderboard-content">
                            <div class="user-rank-detail">
                                <div class="rank-avatar">
                                    <div class="avatar-circle">
                                        <span class="avatar-text" id="user-avatar-text">我</span>
                                    </div>
                                    <div class="rank-number" id="my-rank-number">--</div>
                                </div>
                                <div class="rank-stats">
                                    <div class="stats-item">
                                        <div class="stats-label">用户名</div>
                                        <div class="stats-value" id="my-username"></div>
                                    </div>
                                    <div class="stats-item">
                                        <div class="stats-label">总积分</div>
                                        <div class="stats-value points-highlight" id="my-total-points">0</div>
                                    </div>
                                    <div class="stats-item">
                                        <div class="stats-label">排名位置</div>
                                        <div class="stats-value rank-highlight" id="my-position">第 -- 名</div>
                                    </div>
                                </div>
                            </div>
                            <div class="leaderboard-neighbors">
                                <h4>相邻玩家</h4>
                                <div class="neighbors-list" id="neighbors-list">
                                    <!-- 相邻玩家数据将通过JavaScript动态加载 -->
                                    <div class="loading">加载中...</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="action-buttons">
                        <button class="primary-btn" id="find-match-btn" onclick="findMatch()">寻找对手</button>
                        <button class="secondary-btn" onclick="logout()">退出登录</button>
                    </div>
                </div>
                
                <!-- 匹配等待界面 -->
                <div id="waiting-screen" class="screen" style="display: none;">
                    <h2>正在寻找对手...</h2>
                    <div class="waiting-animation">
                        <div class="spinner"></div>
                        <p>请稍候，系统正在为您匹配同年级的对手</p>
                    </div>
                    <button class="secondary-btn" onclick="cancelMatch()">取消匹配</button>
                </div>
                
                <!-- 匹配成功倒计时界面 -->
                <div id="countdown-screen" class="screen" style="display: none;">
                    <h2>匹配成功！</h2>
                    <p>您的对手：<span id="opponent-name"></span></p>
                    <div class="countdown-display">
                        <span id="countdown-number">3</span>
                    </div>
                    <p>准备开始答题！</p>
                </div>
                
                <!-- 游戏对战界面 -->
                <div id="game-screen" class="screen" style="display: none;">
                    <div class="game-header">
                        <div class="player-info">
                            <div class="opponent-info">
                                <h3 id="game-opponent-name"></h3>
                                <div class="progress-container opponent-progress">
                                    <div class="progress-bar" id="opponent-progress-bar"></div>
                                </div>
                                <div class="progress-text">
                                    <span id="opponent-progress-text">0</span>/<span id="total-questions">10</span>
                                </div>
                            </div>
                            
                            <div class="vs">VS</div>
                            
                            <div class="self-info">
                                <h3>我</h3>
                                <div class="progress-container self-progress">
                                    <div class="progress-bar" id="self-progress-bar"></div>
                                </div>
                                <div class="progress-text">
                                    <span id="self-progress-text">0</span>/<span>10</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="turn-indicator" id="turn-indicator">
                        <p id="turn-message"></p>
                    </div>
                    
                    <div class="question-container" id="game-question">
                        <!-- 题目将在这里显示 -->
                    </div>
                    
                    <div class="input-container">
                        <input type="text" id="game-answer" class="answer-input" placeholder="请输入答案" disabled>
                    </div>
                    
                    <div class="feedback" id="game-feedback"></div>
                    
                    <div class="control-buttons">
                        <button class="control-btn submit-btn" id="submit-btn" onclick="submitGameAnswer()" disabled>提交答案</button>
                    </div>
                </div>
                
                <!-- 游戏结束界面 -->
                <div id="end-screen" class="screen" style="display: none;">
                    <h2 id="result-title">游戏结束！</h2>
                    <div class="result-content">
                        <div class="winner-info">
                            <p id="winner-message"></p>
                        </div>
                        <div class="final-stats">
                            <div class="stat-item">
                                <div class="stat-label">您的进度</div>
                                <div class="stat-value" id="your-final-progress">0</div>
                            </div>
                            <div class="stat-item">
                                <div class="stat-label">对手进度</div>
                                <div class="stat-value" id="opponent-final-progress">0</div>
                            </div>
                            <div class="stat-item">
                                <div class="stat-label">获得积分</div>
                                <div class="points-display">
                                    <span class="points-icon">⚡</span>
                                    <span id="points-gained">0</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="action-buttons">
                        <button class="primary-btn" onclick="playAgain()">再来一局</button>
                        <button class="secondary-btn" onclick="backToUserScreen()">返回主界面</button>
                    </div>
                </div>
                
                <!-- 对手断开连接提示 -->
                <div id="disconnect-modal" class="modal" style="display: none;">
                    <div class="modal-content">
                        <h3>对手已断开连接</h3>
                        <p>对方在游戏过程中离开了，您获得了胜利！</p>
                        <button class="primary-btn" onclick="closeDisconnectModal()">确定</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <script src="https://cdn.socket.io/4.5.0/socket.io.min.js"></script>
    <script src="js/multiplayer.js"></script>
</body>
</html>